<!-- 单位 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input customStyle="height:100%;width: 90%;margin: auto;" placeholderStyle="color: #fff;" placeholder="搜索"
              border="none" color="#fff" shape="circle" v-model="search" @confirm="searchChange">
              <clIcon slot="prefix" type="icon-sousuo_o" color="#fff" size="25"></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <view class="color-list">
        <view class="color-item" @click="go(item)" v-for="(item, index) in list" :key="item.value">
          <liu-swipe-action ref="liuSwipeAction" :index="index" @clickItem="liuClickItem">
            {{ item.label }}
          </liu-swipe-action>
        </view>
      </view>
      <view v-if="list.length === 0" class="m-t-p-50">
        <u-empty mode="list" text="暂无数据">
          <u-button class="empty-button" text="新增供货类型" type="primary" shape="circle"
            color="linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246))"
            @click="clickBtn({ key: 'btn1' })"></u-button>
          <view class="tip-view">
            可点击右上角：+进行快速建档案
          </view>
        </u-empty>
      </view>
    </view>
    <!-- 单位 -->
    <u-modal :show="show" title="供货类型" @cancel="onCencal" @confirm="onSave()" :showCancelButton="true" confirmText="保存">
      <u--input placeholder="请输入内容" border="surround" v-model="label.name"></u--input>
    </u-modal>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";

import {
  getListPriceUnitTypesListAllData,
  addOrUpdatePriceUnitTypesData,
  DeletePriceUnitById
} from "@/apis/bill/information/product";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      search: null,
      list: [],
      config: {
        title: "供货类型",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
      // 颜色列表
      list: [],
      params: {
        data: {},
        page: {
          current: 1,
          size: 10
        }
      },
      // 显示模态框
      show: false,
      label: {
        index: null,
        name: ''
      },
      type: null, // type 是用来设置当一个页面有2个地方使用这个页面的时候返回不同的参数
    };
  },
  computed: {},
  onLoad(info) {
    if (info) {
      this.type = info.type
    }
    this.initData();
  },
  methods: {
    // 侧拉框
    liuClickItem(item) {
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset()
        this.label.name = this.list[item.index].label
        this.label.index = item.index
        this.show = true
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset()
        this.deleteByIdQuarterData(this.list[item.index].id)
      }
    },
    // 删除
    deleteByIdQuarterData(id) {
      DeletePriceUnitById(id).then((res) => {
        if (!res.flag) return;
        this.initData();
      });
    },
    go(val) {
      // 返回上一级并传输参数
      if (this.type == 'switch') {
        uni.$emit('on-switch-goods-supply-type', val)
      } else {
        uni.$emit('on-goods-supply-type', val)
      }

      this.$Router.back()
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      uni.showLoading({
        title: '加载中'
      })
      getListPriceUnitTypesListAllData().then((res) => {
        if (!res.flag) return;
        this.list = res.data;
        uni.hideLoading()
      }).catch(err => {
        uni.hideLoading()
      });
    },
    scrolltolower() { },
    searchChange() {
      this.list = [];
      this.pages.current = 1;
      this.initData();
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.label = {
          index: null,
          name: ''
        };
        this.show = true
      }
    },
    onCencal() {
      this.label = {
        index: null,
        name: ''
      };
      this.show = false
    },
    onSave() {
      if (this.label.index == null) {
        let data = {
          label: this.label.name,
        };
        this.list.push(data);
      } else {
        this.list[this.label.index].label = this.label.name
      }
      addOrUpdatePriceUnitTypesData(this.list).then(res => {
        if (!res.flag) return;
        this.label = {
          index: null,
          name: ''
        };
        this.show = false
        this.initData()
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

.color-list {
  background-color: #fff;

  .color-item {
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border-bottom: 1rpx solid #eee;
    line-height: 80rpx;
  }
}
</style>
